<template>
	<view class="detail-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="统战对象详情"></uni-navbar></view>

		<view class="detail-box">
			<view class="sub-box">
				<view class="sub-info">
					<view class="clamp">{{ info.name }}</view>
					<view class="sub-node">
						<text class="text">{{ info.position }}</text>
					</view>
				</view>
				<image class="sub-img" :src="$imagePreview(info.remark1)" @click="previewImage($imagePreview(info.remark1))" mode="aspectFill"></image>
			</view>
		</view>

		<view class="form-box form-box-show" v-if="info.id">
			<u-form ref="uForm">
				<u-form-item class="form-item" label="性别">{{ info.sex || '未填写' }}</u-form-item>
				<u-form-item class="form-item" label="民族">{{ info.nationName || '未填写' }}</u-form-item>

				<u-form-item class="form-item" label="出生年月">{{ info.birthday || '未填写' }}</u-form-item>
				<u-form-item class="form-item" label="身份证号">{{ info.idNo || '未填写' }}</u-form-item>

				<u-form-item class="form-item" label="党派时间">{{ info.partyTime || '未填写' }}</u-form-item>
				<u-form-item class="form-item" label="籍贯">{{ info.jiguan || '未填写' }}</u-form-item>
				<u-form-item class="form-item" label="参加工作">{{ info.workDate || '未填写' }}</u-form-item>

				<u-form-item class="form-item" label="毕业院校">{{ info.graduateSchool || '未填写' }}</u-form-item>
				<u-form-item class="form-item" label="专业">{{ info.remark12 || '未填写' }}</u-form-item>

				<u-form-item class="form-item" label="学历">{{ info.xueliName || '未填写' }}</u-form-item>
				<u-form-item class="form-item" label="学位">{{ info.xueweiName || '未填写' }}</u-form-item>
				<u-form-item class="form-item" label="职称">{{ info.zhichengName || '未填写' }}</u-form-item>

				<u-form-item class="form-item" label="代表证号">{{ info.remark13 || '未填写' }}</u-form-item>
				<u-form-item class="form-item" label="代表团">{{ info.wyhdzName || '未填写' }}</u-form-item>

				<u-form-item class="form-item" label="召集人">{{ info.zhaoFlag || '未填写' }}</u-form-item>
				<u-form-item class="form-item" label="是否连任">{{ info.buFlag || '未填写' }}</u-form-item>
				<u-form-item class="form-item" label="补选时间 ">{{ info.buDate || '未填写' }}</u-form-item>

				<u-form-item class="form-item" label="代表级别">{{ info.wyjbName || '未填写' }}</u-form-item>
				<u-form-item class="form-item" label="身份">{{ info.shenfenName || '未填写' }}</u-form-item>

				<u-form-item class="form-item" label="工作单位">{{ info.remark6 || '未填写' }}</u-form-item>
				<u-form-item class="form-item" label="现任职务">{{ info.position || '未填写' }}</u-form-item>
				<u-form-item class="form-item" label="通讯地址">{{ info.address || '未填写' }}</u-form-item>
				<u-form-item class="form-item" label="邮编">{{ info.postcode || '未填写' }}</u-form-item>
				<u-form-item class="form-item" label="办公电话">{{ info.officeNumber || '未填写' }}</u-form-item>
				<u-form-item class="form-item" label="家庭电话">{{ info.homeNumber || '未填写' }}</u-form-item>
				<u-form-item class="form-item" label="移动电话">{{ info.phoneNumber || '未填写' }}</u-form-item>
				<u-form-item class="form-item" label="电子邮箱">{{ info.remark22 || '未填写' }}</u-form-item>

				<u-form-item class="form-item" label="简历" labelPosition="top">
					<view class="input-text">{{ info.resume || '未填写' }}</view>
				</u-form-item>
				<u-form-item class="form-item" label="主要表现" labelPosition="top">
					<view class="input-text">{{ info.remark14 || '未填写' }}</view>
				</u-form-item>

				<u-form-item class="form-item" label="职业类别">{{ info.user_info_zylbName || '未填写' }}</u-form-item>
				<u-form-item class="form-item" label="提名方式">{{ info.user_info_tmfsName || '未填写' }}</u-form-item>

				<u-form-item class="form-item" label="曾任何届市以上人大代表" labelPosition="top">
					<view class="input-text">{{ info.remark32 || '未填写' }}</view>
				</u-form-item>
				<u-form-item class="form-item" label="兼任何级人大代表" labelPosition="top">
					<view class="input-text">{{ info.remark33 || '未填写' }}</view>
				</u-form-item>
				<u-form-item class="form-item" label="是否归侨代表" labelPosition="top">
					<view class="input-text">{{ info.remark34 || '未填写' }}</view>
				</u-form-item>

				<u-form-item class="form-item" label="选举结果" labelPosition="top">
					<view class="input-text">{{ info.remark31 || '未填写' }}</view>
				</u-form-item>

				<u-form-item class="form-item" label="备注" labelPosition="top">
					<view class="input-text">{{ info.remark || '未填写' }}</view>
				</u-form-item>
			</u-form>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			id: '',
			show: true,
			self: '',
			jieci: '',

			info: {}
		};
	},
	onLoad(option) {
		this.loadLogin();
		this.id = option.id;
		if (option.style) {
			this.self = option.style ? true : false;
		}
		this.loadData();
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.Authorization) {
				this.userId = this.userInfo.sysUser.id;
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.jieci = this.userInfo.jieCi.pName + this.userInfo.jieCi.name;
			} else {
				this.$logout();
			}
		},
		loadData() {
			let data = {
				id: this.id
			};
			let url = '/system/user-info/query?id=' + this.id;
			if (this.self) {
				url = '/system/user-info/queryInfoByUserId?id=' + this.id;
			}

			this.$request(url, data).then((res) => {
				if (!res.data) {
					return false;
				}
				this.info = res.data;

				this.loadDictName('nation', this.info.nation);
				this.loadDictName('xuewei', this.info.xuewei);
				this.loadDictName('xueli', this.info.xueli);
				this.loadDictName('zhicheng', this.info.zhicheng);
				this.loadDictName('wyhdz', this.info.wyhdz);
				this.loadDictName('wyjb', this.info.wyjb);
				this.loadDictName('shenfen', this.info.shenfen);
				this.loadDictName('user_info_zylb', this.info.remark29);
				this.loadDictName('user_info_tmfs', this.info.remark30);
			});
		},
		loadDictName(type, value) {
			this.$request('/system/sys-dict/dictList', {
				clientCode: this.clientCode,
				sysDict: {
					dictType: type
				}
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				let temp1 = value ? value.split(',') : '';
				let temp2 = [];
				res.data.forEach((item, index) => {
					if (temp1.indexOf(item.dictValue) != -1) {
						temp2.push(item.dictName);
					}
				});
				this.info[`${type}Name`] = temp2.join(', ');
				this.$forceUpdate();
			});
		},
		telHandle(tel) {
			if (tel) {
				// '15763625253'.replace(/^(\d{3})\d{4}(\d{4})/g, '$1****$2')
				return tel.replace(/^(\d{3})(\d{4})/g, '$1-$2-');
			} else {
				return tel;
			}
		},
		previewImage(src) {
			uni.previewImage({
				urls: [src]
			});
		},
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="scss">
.detail-view {
	overflow: hidden;
	min-height: 100vh;
	background-color: #fff;
}

.detail-box {
	padding: 20rpx 30rpx;
	color: #333;
	border-bottom: 2rpx solid $u-border-color;

	.sub-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.sub-info {
		font-size: 17px;
		line-height: 48rpx;
	}

	.sub-node {
		font-size: 12px;
		color: #999;
		line-height: 34rpx;
	}

	.sub-img {
		width: 84rpx;
		height: 84rpx;
		border-radius: 84rpx;
	}
}

.form-box {
	.form-item {
		@include mp-flex;
	}

	.input-text {
		width: 100%;
		text-align: left;
	}

	.form-right {
		width: 100%;
		text-align: right;
	}

	.h2-ttl {
		padding: 18rpx 30rpx;
		font-size: 16px;
		color: #b2976b;
		line-height: 44rpx;
		background-color: $u-bg-color;
	}
}

.form-btn {
	margin: 60rpx auto;
	width: 360rpx;
}
</style>
